    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                height: 200px;
                width: 200px;
                /*border: 1px solid #000;*/
                margin: 200px auto;
                position: relative;
            }

            .box::before,.box::after{
                position: absolute;
                height: 285px;
                width: 200px;
                /*border: 1px solid #000;*/
                content: "";
                top: 0;
                left: 0;
                background: #f52f4c;
                /*border-top-radius: 50%;*/

            }
            .box::after{
                 left: -61px;
                 border-top-right-radius: 50%;
                 border-top-left-radius: 50%;
                border-bottom-right-radius: 20%;
                transform: rotate(-45deg);
             }
            .box::before{

                border-top-right-radius: 50%;
                border-top-left-radius: 50%;
                border-bottom-left-radius: 20%;
                transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>